<script lang="jsx">
import { ref, defineComponent, watch } from "vue";

export default defineComponent({
  props: {
    str: {
      typr: String,
      default: ""
    },
    viewValueStr: {
      typr: String,
      default: ""
    }
  },

  setup(props, { emit }) {
    const newStr = ref("");
    const inputValArr = ref([]);

    watch(
      props,
      (newProps, oldProps) => {
        console.log("props变化了===", props);
        getStr();
        editView();
      },
      { deep: true }
    );

    const getjsx = () => {
      // props.num += 1
      // console.log(9090909090, newStr.value, inputValArr.value)
      emit("submit", Array.from(newStr.value), inputValArr.value);
    };

    const getStr = () => {
      const _string = props.str?.replace(/【数值】/g, "N");
      const string = _string?.replace(/【字符】/g, "S");
      newStr.value = string;
      return string;
    };
    getStr();

    const editView = () => {
      const viewValueArr = props.viewValueStr.split(",");
      const _string = props.str?.replace(/【数值】/g, "N");
      const string = _string?.replace(/【字符】/g, "S");
      let indexArr = [];
      inputValArr.value = [];
      Array.from(string).map((item, index) => {
        if (item === "N" || item === "S") {
          indexArr.push(index);
        }
      });
      indexArr.map((iItem, index) => {
        inputValArr.value[iItem] = viewValueArr[index];
      });
      console.log("下标arr===", inputValArr.value);
    };
    editView();

    return () => (
      <div class="replace-result-wrap">
        {Array.from(newStr.value).map((item, index) => {
          if (item === "N") {
            return (
              <el-input
                placeholder="数值"
                maxlength="20"
                v-model={inputValArr.value[index]}
                onChange={() => {
                  getjsx();
                }}
                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,10})?).*$/g, '$1')"
              />
            );
          } else if (item === "S") {
            return (
              <el-input
                placeholder="字符"
                maxlength="20"
                v-model={inputValArr.value[index]}
                onChange={() => {
                  getjsx();
                }}
              />
            );
          } else {
            if (item && item !== " ") {
              return <span>{item}</span>;
            } else {
              return <span class="empty"></span>;
            }
          }
        })}
      </div>
    );
  }
});
</script>

<style lang="scss" scoped>
.replace-result-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .el-input {
    width: 80px;
    margin: 0 10px;
  }

  .el-input + .el-input {
    margin-left: 0;
  }
  .empty {
    display: inline-block;
    width: 4px;
    height: 4px;
  }
}
</style>
